@tailwind utilities;

@layer utilities {
    .-btn-xs {
        @apply -text-xs -px-1;
        --btn-height: 1.25rem;
    }
    .-btn-sm {
        @apply -text-sm -px-2;
        --btn-height: 1.5rem;
    }
    .-btn-md {
        @apply -px-2;
        --btn-height: 1.75rem;
    }
    .-btn-lg {
        @apply -text-lg -px-4;
        --btn-height: 2.5rem;
    }
    .-btn-xl {
        @apply -text-xl -px-5;
        --btn-height: 3rem;
    }
}

.size-xs > .btn,
.btn.size-xs {
    @apply -btn-xs;
}
.size-sm > .btn,
.btn.size-sm {
    @apply -btn-sm;
}
.size-md > .btn,
.btn.size-md {
    @apply -btn-md;
}
.size-lg > .btn,
.btn.size-lg {
    @apply -btn-lg;
}
.size-xl > .btn,
.btn.size-xl {
    @apply -btn-xl;
}

.btn.square {
    @apply -px-0 -gap-0.5 -aspect-square;
}
@supports not (aspect-ratio: 1 / 1){
    .btn.square {
        @apply -w-[--btn-height];
    }
}
.btn.btn-caret {
    @apply -px-1;
}
.btn.btn-wide {
    @apply -min-w-[80px];
}
